<template>
  <div class="dect">
    <div>
      <div class="head" v-for="(i, indexOne) in detData" :key="indexOne">
        <span>
          {{ i.product_name }}
        </span>
        <div class="right">
          <small>概述</small>
          <small>参数</small>
          <small>用户评价</small>
        </div>
      </div>
      <div class="dectGood">
        <!--左侧 轮播图 -->
        <!-- <GetImg /> -->
        <el-carousel
          height="520px"
          :interval="5000"
          indicator-position="outside"
          style="width: 500px"
        >
          <el-carousel-item v-for="(item, indexTow) in getSlideShow" :key="indexTow">
            <img
              :src="$getImg + item.product_picture"
              style="width: 100%; height: 100%"
            />
          </el-carousel-item>
        </el-carousel>
        <!-- 右侧 -->
        <div class="rightTow" v-for="(items, index) in detData" :key="index">
          <h1>
            {{ items.product_name }}
          </h1>
          <p class="referralSty">
            {{ items.product_intro }}
          </p>
          <p class="publicSty">小米自营</p>
          <p class="publicSty last">
            {{ items.product_selling_price + "元" }}
            <s style="color: #888">
              {{ items.product_price + "元" }}
            </s>
          </p>
          <div>
            <p>
              <span>
                {{ items.product_name }}
              </span>
              <span>
                {{ items.product_selling_price + "元" }}
                <s>
                  {{ items.product_price + "元" }}
                </s>
              </span>
            </p>
            <h1 class="publicSty">总计:{{ items.product_selling_price + "元" }}</h1>
          </div>
          <!-- 按钮 -->
          <div>
            <p>
              <el-button type="warning" @click="shopping(detData)">加入购物车</el-button>
              <el-button type="info" @click="collect(detData)">喜欢</el-button>
            </p>
            <p>
              <span>
                <i class="el-icon-circle-check"></i>
                小米自营
              </span>
              <span>
                <i class="el-icon-circle-check"></i>
                小米发货
              </span>
              <span>
                <i class="el-icon-circle-check"></i>
                7天无理由退货
              </span>
              <span>
                <i class="el-icon-circle-check"></i>
                7天价格保护
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DetaAPI from "@/api/DetailsAPI.js";
export default {
  name: "",
  data() {
    return {
      detData: [],
      getSlideShow: [],
    };
  },
  mounted() {
    this.Details();
    this.DetailsImg();
  },
  methods: {
    //   请求数据
    async Details() {
      const res = await DetaAPI.DetailsData({ productID: this.$route.params.id });
      // console.log(res);
      this.detData = res.Product;
    },
    // 请求轮播图
    async DetailsImg() {
      const res = await DetaAPI.DetailsImg({ productID: this.$route.params.id });
      // console.log(res);
      this.getSlideShow = res.ProductPicture;
    },
    // 点击加入购物车把当前的商品加入购物车
    shopping(obj) {
      // const res = await DetaAPI.addShopping({ user_id: 2994, product_id: 2 });
      // console.log(res);
      this.$store.commit("shoppingData", obj);
      this.$notify({
        title: "成功",
        message: "加入购物车成功",
        type: "success",
      });
    },
    // 点击喜欢将当前商品加入到收藏
    collect(obj) {
      // const res = await CollectAPI.addCollect({
      //   user_id: this.$store.state.usersInfo.user_id,
      //   product_id: this.$route.params.id,
      // });

      // if (objID == stateID) {
      // this.$notify({
      //   title: "错误",
      //   message: "该商品已经添加收藏，请到我的收藏查看",
      //   type: "error",
      // });
      // } else {
      // 将当前的商品数据存储到Vuex里面
      this.$store.commit("collectEvent", obj);
      // 提示信息
      this.$notify({
        title: "成功",
        message: "添加收藏成功",
        type: "success",
      });
      // }
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.dect {
  margin: 20px 0;
  .head {
    height: 50px;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 5px 5px 0 #ccc;
    & > span {
      font-size: 20px;
    }
    .right {
      small {
        margin-left: 10px;
      }
      small:hover {
        color: orange;
        cursor: pointer;
      }
    }
  }
  .dectGood {
    padding: 40px 40px 0 40px;
    display: flex;
    justify-content: space-between;
    .rightTow {
      width: 750px;
      h1 {
        font-weight: 400;
      }
      .last {
        padding: 15px 0;
        border-bottom: 1px solid #ddd;
      }
      & > div:nth-last-child(2) {
        height: 150px;
        background: #f9f9fa;
        margin-top: 50px;
        padding: 40px;
        box-sizing: border-box;
        p {
          display: flex;
          justify-content: space-between;
          color: #b0b0b0;
        }
        & > p:nth-child(1) {
          margin-bottom: 25px;
        }
      }
      & > div:nth-last-child(1) > p:nth-child(1) {
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
        button {
          width: 300px;
          height: 50px;
        }
        & > button:nth-child(1) {
          background: #ff6700;
        }
      }
      & > div:nth-last-child(1) > p:nth-child(2) {
        margin-top: 15px;
        span {
          margin-right: 15px;
          color: #b0b0b0;
        }
      }
    }
    .referralSty {
      margin: 10px 0;
      color: #b0b0b0;
    }
    .publicSty {
      color: orange;
    }
  }
}
</style>
